<template>
  <BasicModal
    @register="register"
    :width="850"
    :min-height="600"
    title="处理代付打款"
    @ok="handleOk"
    :column="4"
    :show-cancel-btn="false"
    :show-ok-btn="false"
  >
    <a-descriptions :size="'middle'" bordered>
      <a-descriptions-item label="系统单号" :span="2">{{ info?.orderNo }}</a-descriptions-item>
      <a-descriptions-item label="商户单号" :span="2">{{ info?.outTradeNo }}</a-descriptions-item>
      <a-descriptions-item label="通道类型" :span="2">{{ info?.codeTitle }}</a-descriptions-item>
      <a-descriptions-item label="抢单时间" :span="2">
        {{ dayjs(info?.checkTime * 1000).format('YYYY-MM-DD HH:mm:ss') }}
      </a-descriptions-item>
      <a-descriptions-item label="订单金额" :span="4">{{ info?.amount }}</a-descriptions-item>
      <a-descriptions-item label="收款姓名" :span="4"> {{ info?.payName }} </a-descriptions-item>
      <a-descriptions-item label="银行名称" :span="4">{{ info?.bankName }}</a-descriptions-item>
      <a-descriptions-item label="收款二维码" :span="4">
        <a-image :width="64" :src="info?.payImgSrc" />
      </a-descriptions-item>
      <a-descriptions-item label="备注信息" :span="4">{{ info?.remark }}</a-descriptions-item>
      <a-descriptions-item label="我报备的付款姓名" :span="2">
        {{ info?.name }}
      </a-descriptions-item>
      <a-descriptions-item label="我报备的付款账号" :span="2">
        {{ info?.account }}
      </a-descriptions-item>
    </a-descriptions>

    <a-row align="center" justify="center" style="margin: 16px 0">
      上传付款凭证图
      <a-upload v-model:file-list="fileList" :beforeUpload="uploadFunc" list-type="picture-card">
        <div>
          <plus-outlined />
          <div style="margin-top: 8px">上传</div>
        </div>
      </a-upload>
    </a-row>
    <a-row align="center" justify="center" style="margin: 16px 0">
      <a-col :span="24">
        <a-form-item label="备注" name="remark">
          <a-input placeholder="请输入备注信息" v-model:value="formRef.agentRemark" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row align="center" justify="space-around">
      <a-col>
        <a-button @click="handleCancel" style="background-color: #efefef; color: #000"
          >取消订单</a-button
        >
      </a-col>
      <a-col>
        <a-button
          @click="openModal(true, { info, report: true })"
          style="background-color: #e99d42; color: white"
          >重新选择报备付款方式</a-button
        >
      </a-col>
      <a-col>
        <a-button
          @click="openTransfer(true, { info, refresh })"
          style="background-color: #e99d42; color: white"
          >转让指定代理</a-button
        >
      </a-col>
      <a-col>
        <a-button @click="handleRemittance" style="background-color: #54bcbd; color: white"
          >确认已打款</a-button
        >
      </a-col>
    </a-row>
  </BasicModal>
  <ReportModal @register="registerModal" @ok="handleOk" />
  <Transfer @register="registerTransfer" @ok="handleOk" />
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { BasicModal, useModalInner, useModal } from '@/components/Modal';
  import { RemittanceApi, CancelOrderApi, GrabOrderInfoApi } from '@/api/payment';
  import { message } from 'ant-design-vue';
  import dayjs from 'dayjs';
  import { PlusOutlined } from '@ant-design/icons-vue';
  import { uploadApi } from '@/api/sys/upload';
  import { ReportModal, Transfer } from '.';

  const fileList = ref<any[]>([]);

  const info = ref({
    orderNo: '',
    outTradeNo: null,
    codeTitle: null,
    checkTime: null,
    amount: null,
    payName: null,
    bankName: null,
    payImgSrc: null,
    remark: '',
    name: '',
    account: '',
  });
  const formRef = ref({
    agentImgSrc: [],
    agentRemark: '',
  });

  let reloadFunc;

  const [register, { closeModal }] = useModalInner((data) => {
    info.value = data.record;
    reloadFunc = data.reload;
  });
  const [registerModal, { openModal }] = useModal();
  const [registerTransfer, { openModal: openTransfer }] = useModal();

  const refresh = async () => {
    const { data } = await GrabOrderInfoApi({
      orderNo: info.value.orderNo,
    });
    info.value = data;
  };

  const uploadFunc = (file) => {
    uploadApi({
      file: file,
      filename: file.name,
      data: {
        analysis: 1,
      },
    }).then((res) => {
      const { data } = res;
      if (data.code === 1) {
        const index = fileList.value.length;
        fileList.value[index - 1].status = 'done';
        fileList.value[index - 1].response = data.data.file;
        message.success(data.msg);
      } else {
        fileList.value[index - 1].status = 'error';
        message.error(data.msg);
      }
    });
    return false;
  };

  const handleOk = () => {
    closeModal();
    refresh();
    reloadFunc();
  };

  function handleCancel() {
    CancelOrderApi({
      orderNo: info.value.orderNo,
    }).then(() => {
      message.success('取消成功');
      closeModal();
      reloadFunc();
    });
  }
  function handleRemittance() {
    console.log(fileList.value);
    // 处理文件
    if (fileList.value.length < 1 || !fileList.value[0].response) {
      message.error('请上传打款凭证');
      return;
    }
    formRef.value.agentImgSrc = [];
    fileList.value.forEach((element) => {
      formRef.value.agentImgSrc.push(element.response.full_url);
    });

    RemittanceApi({
      orderNo: info.value.orderNo,
      agentImgSrc: formRef.value.agentImgSrc,
      agentRemark: formRef.value.agentRemark,
    }).then(() => {
      message.success('打款成功');
      closeModal();
      reloadFunc();
    });
  }
</script>
